
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<body>
    <div id="app"> <!--这个div其实就相当于根组件-->
        <first-com></first-com>
    </div>
</body>
</html>
<!-- 内嵌模板 -->
<!-- 模板之中,只能有一个根元素 -->
<template id="first">
    <fieldset>
        <legend>组件</legend>
        <h1>{{msg}}</h1>
        <first-child></first-child><!--在全局组件下展示这个子组件-->
    </fieldset>
</template>
<!-- 子组件模板 -->
<template id="child">
    <fieldset>
        <legend>子组件</legend>
        <h1>子组件</h1>
    </fieldset>
</template>
<script>
    //创建一个组件,分3个步骤

    //1.组件注册

    //2.编写组件模板

    //3.展示组件

    //全局组件注册
    //组件的data为什么是一个函数,而不是一个对象?
    //每个组件的都需要有独立的作用域,使用函数可以维护一份被返回对象的独立的拷贝,这样组件之间的值就不会混乱污染

    Vue.component("first-com",{//这个对象中的属性,和vue实例差不多
        data(){
            return {
                msg:"第一个组件"
            }
        },
        template:"#first",
        components:{ //表示在first-com组件下，再次注册一个组件
            "first-child":{ //first-child是一个组件的名字
                template:"#child",//编写模版
                data(){
                    return {
                        msg:"子组件"
                    }
                }
            }
        }
    })

    const vm =new Vue({//从组件上的角度上来说,vue实例其实就是一个根组件
        el:"#app",
        data:{
            msg:"根组件"
        }
    })
</script>